<template>
  <div class="fake-form-container">
    <u-image width="100%" height="300rpx" :src="src"></u-image>
    <div class="form-conent">
      <formItem
        :icon="userIcon"
        title="姓名"
        v-model="form.name"
        placeholder="请输入姓名"
      />
      <formItem
        :icon="mobileIcon"
        title="手机号"
        v-model="form.moblie"
        placeholder="请输入手机号"
      />
      <!-- <formItem :icon="codeIcon" title="验证码" v-model="form.code" placeholder="请输入验证码"/> -->
      <formItem
        :icon="IDIcon"
        title="身份证"
        v-model="form.id"
        placeholder="请输入身份证"
      />
    </div>
    <button class="submit-btn" type="default" @click="submit">立即提交</button>
  </div>
</template>

<script>
import userIcon from "./../../static/images/shouji.png";
import IDIcon from "./../../static/images/shenfenzheng.png";
import mobileIcon from "./../../static/images/linmo-mima.png";
import codeIcon from "./../../static/images/tubiaozhizuomoban.png";
import formItem from "./components/formLayout.vue";
import Schema from "async-validator";
import { mapState } from "vuex";

export default {
  data() {
    const descriptor = {
      name: { type: "string", required: true, message: "姓名不能为空" },
      moblie: {
        type: "number",
        required: true,
        validator(rule, value, callback) {
          if (!value) callback("手机号不能为空");
          const telRe = /^[1][3,4,5,6.7,8,9][0-9]{9}$/;
          if (!telRe.test(value)) {
            callback("请输入正确手机号");
          } else {
            callback();
          }
        },
      },
      id: [
        {
          type: "string",
          required: true,
          validator(rule, value, callback) {
            if (!value) callback("身份证不能为空");
            const idRe = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if (!idRe.test(value)) {
              callback("请输入正确身份证号");
            } else {
              callback();
            }
          },
        },
      ],
    };
    return {
      src: "https://cdn.joker88.cn/fadsffasdf888.png",
      userIcon: userIcon,
      mobileIcon: mobileIcon,
      codeIcon: codeIcon,
      IDIcon: IDIcon,
      mobile: "",
      form: {
        name: "",
        moblie: "",
        code: "",
        id: "",
      },
      validator: new Schema(descriptor),
    };
  },
  computed: {
    ...mapState("Public", ["isSubServiceOpen"]),
  },
  components: {
    formItem,
  },
  methods: {
    submit() {
      // PROMISE USAGE
      this.validator
        .validate(this.form)
        .then(() => {
          if (this.isSubServiceOpen) {
            uni.redirectTo({
              url: `/pages/index/index`,
              success: function(res) {
                console.log("res", res);
              },
            });
          } else {
            uni.showToast({
              title: "提交成功",
              duration: 2000,
            });
          }
        })
        .catch(({ errors }) => {
          uni.showToast({
            title: errors[0].message,
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.fake-form-container {
}

.form-conent {
  margin: 40rpx 0 60rpx 0;
}

.submit-btn {
  margin: 0 50rpx;
  border-radius: 50rpx;
  background-color: #3745eb;
  color: white;
}
</style>
